<template>

  <div
      id="popup"
      :class="{ 'opacity-100': show, 'opacity-0': !show, 'pointer-events-none': !show, 'pointer-events-auto': show }"
      class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-screen max-w-md px-6 py-4 overflow-hidden sm:rounded-lg sm:w-full sm:max-w-md">
    <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-xl sm:rounded-lg">

      <slot></slot>
    </div>
    <button class="fixed top-4 right-6 text-gray-400 hover:text-gray-500 focus:outline-none" @click="hidePopup">
      <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M6 18L18 6M6 6l12 12" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
      </svg>
    </button>
  </div>
</template>

<script lang="ts" setup>

import {ref} from "vue";

const show = ref(false)


//显示弹窗
const showPopup = () => {
  show.value = !show.value
}
//隐藏弹窗
const hidePopup = () => {
  show.value = false
}


defineExpose({showPopup, hidePopup})

</script>

<style scoped>
#overlay {
  transition: opacity 0.5s;
}

#popup {
  transition: opacity 0.5s, transform 0.5s;
}
</style>